<template>
    <div class="car-min">
        <div class="goods-list">
             <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="(items,i) in carArr" :key='items.id'>&nbsp;&nbsp;
						<mt-switch v-model="$store.getters.getaddr[items.id]" @change='settchange(items.id,$store.getters.getaddr[items.id])'></mt-switch>&nbsp;&nbsp;
                        <img :src="items.thumb_path" alt="">&nbsp;
                        <div class="info">
                            <h4>{{items.title}}</h4>
                            <p class="info-sub"> 
                                <span class="price">${{items.sell_price}}</span>
                                &nbsp;&nbsp;<num :incont='$store.getters.getcarr[items.id]' :ids='items.id'></num>&nbsp;&nbsp;
                                <a href="#" @click.prevent="remove(items.id,i)">删除</a>
                            </p>
                        </div> 
					</div>
				</div>
			</div>
        </div>
            <div class="mui-card"> 
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
                        <div class="left">
                            <p>总计（不含运费）</p>
                            <p>已勾选商品 <span class="red">{{$store.getters.getout.coent}}</span> 件，总价：<span class="red">￥{{$store.getters.getout.amiot}}</span></p>
                        </div>
                         <mt-button type='danger'>支付</mt-button>
					</div>
				</div>
			</div>
    </div>
</template>
<script>
import num from '../component/number.vue';
import { Switch } from 'mint-ui';
export default {
    data() {
        return {
            value:true,
            carArr:[]
        }
    },
    created() {
        this.getcarlist()
    },
    methods: {
        getcarlist(){
            var idList=[];
            this.$store.state.car.forEach(element => idList.push(element.id));
            if(idList.leagth==0){
                return
            }
            this.$http.get('api/goods/getshopcarlist/'+idList.join(',')).then(res=>{
                           if(res.body.status==0){
                               this.carArr=res.body.message
                           }

            })
        },
        remove(id,index){
        this.carArr.splice(index,1)
        this.$store.commit('removeCar',id)
        },
        settchange(id,val){
             this.$store.commit('setchange',{id,selected:val})
        }
    },
    components:{
        num
    }
    
}
</script>
 <style lang="scss" scoped>
    .car-min{
       .goods-list{
          width: 100%;
          .mui-card-content-inner{
              display: flex;
              padding: 8px 0px;
        img{
               width: 50px;
               height: 50px;
           }
        .info-sub{
              display: flex;
              align-items: center;
          }
         
          }
          
       }
    }
    .jiesuan{
        display: flex;
        justify-content: space-between;
        .red{
            color: red;
            font-size: 1.2em;
        }
    }
</style>